nav {
    background-color: #ebebeb;
  }
  
  nav a {
    display: block;
    text-align: center;
    height: 4rem;
    line-height: 4rem;
  }

  nav ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  
  nav li {
    flex: 1;
    position: relative;
  }
  
  nav li > a {
    font-size: 1.6rem;
  }
  
  nav li:hover > a {
    color: #fff;
    background-color: #89211b;
  }
  
  nav li:first-of-type > a {
    color: #fff;
    background-color: #89211b;
  }
  
 
  nav .sub-menu {
    display: none;
    position: absolute;
  }
  
  nav ul.sub-menu a {
    color: #fff;
    font-size: 1.2rem;
  }
  
 
  nav li:hover ul.sub-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #89211b;
    width: calc(120rem / 9);
    /* width: calc(100vw / 9);   */
  }
  
  nav ul.sub-menu li:hover > a {
    background-color: #a1261f;
  }
  
        .top {
            text-align: right;
            height: 41px;
            font-size: 14px;
            font-family: "Microsoft YaHei", sans-serif; 
            font-weight: 400;
            color: #FFFFFF;
            background: #255C9B;
            line-height: 41px;
        }
      
        .head {
        background: url('C:\\vscodePro\\images\\bg.png') no-repeat center center #2C6CB6;
        padding-bottom: 19px;
        
    }
    
    .head .logo{
        float: left;
    }
    .head .logo img{
        
    max-width: 100%;
    }
          
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    
    .top {
        text-align: right;
        height: 41px;
        font-size: 14px;
        font-family: "Microsoft YaHei", sans-serif;
        font-weight: 400;
        color: #FFFFFF;
        background: #255C9B;
        line-height: 41px;
        padding-right: 20px;
    }
    
    
    nav {
        background-color: #255C9B;
        font-family: "Microsoft YaHei", sans-serif;
    }
    
    
    nav ul {
        list-style: none;
        display: flex;  
        justify-content: center;
        margin: 0;
        padding: 0;
    }
    
    
    nav ul li {
        position: relative;
        padding: 10px 20px;
    }
    
    
    nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 16px;
    }
    
    
    nav ul li a:hover {
        text-decoration: underline;
    }
    
    
    nav ul li ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #2C6CB6;
        padding: 0;
        list-style: none;
        min-width: 200px;
    }
    
    nav ul li:hover ul {
        display: block;
    }
    
    
    nav ul li ul li {
        padding: 10px;
        text-align: left;
    }
    
    nav ul li ul li a {
        font-size: 14px;
    }
    
    
    nav ul li ul li a:hover {
        text-decoration: underline;
    }
    
    
    @media screen and (max-width: 768px) {
        nav ul {
            flex-direction: column;
            align-items: flex-start;
        }
    
        nav ul li {
            width: 100%;
            padding: 10px;
            text-align: left;
        }
    
        nav ul li ul {
            position: static;
            width: 100%;
            display: block;
        }
    
        nav ul li ul li {
            padding-left: 20px;
        }
    }
    
    
    

    